<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>订单详情</title>
  <link rel="stylesheet" type="text/css" href="__CSS__/api.css" />
  <link rel="stylesheet" type="text/css" href="__CSS__/aui.css" />
  <style>

    body {
      background: #F6F6F6;
      background-image: linear-gradient(to bottom, #535557, #535557 160px, transparent 160px, transparent 100%);
      background-image: -webkit-linear-gradient(270deg, #535557, #535557 160px, transparent 160px, transparent 100%);
    }

    .statusBox {
      padding-top: 0.75rem;
      padding-bottom: 4.2rem;
      padding-left: 0.75rem;
    }

    .statusImg {
      width: 1.25rem;
      height: 1.25rem;
      margin-right: 0.45rem;
    }

    .status {
      font-size: 0.9rem;
      color: #fff;
      font-weight: 500;

      margin-bottom: 0.3rem;
    }

    .countdown {
      font-size: 0.6rem;
      color: rgba(255, 255, 255, 0.74);
      line-height: 0.85rem;

    }

    .container {
      width: 100%;
      padding: 0 0.75rem;
      margin-top: -3.45rem;
      margin-bottom: 1rem;
    }

    .outer {
      width: 100%;
      padding: 0.75rem 0;
      background: #fff;
      border-radius: 10px;
      margin-bottom: 0.5rem;
    }

    .titleBox {
      display: flex;
      align-items: center;
      margin-bottom: 0.75rem;
    }

    .linee {
      width: 3px;
      height: 15px;
      background: #EE742B;
      margin-right: 0.6rem;
      border-radius: 0px 15px 15px 0px;
    }

    .title {
      font-size: 0.6rem;
      color: #333;
      font-weight: 500;
      line-height: 0.85rem;
    }

    .userBox {
      padding-left: 0.75rem;
      padding-right: 0.55rem;
      display: flex;
      align-items: center;
      font-size: 0.85rem;
      color: #333;
      margin-bottom: 0.4rem;
    }

    .username {
      line-height: 1.2rem;
      margin-right: 0.9rem;
    }

    .telephone {
      line-height: 1.2rem;
    }

    .arrow {
      width: 0.75rem;
      height: 0.75rem;
      margin-left: 1px;
    }

    .addressBox {
      padding: 0 0.75rem;
      display: flex;
      align-items: center;
    }

    .addressImg {

      width: 0.75rem;
      height: 0.75rem;
      margin-right: 0.2rem;
    }

    .address {
      font-size: 0.8rem;
      color: #535557;
      line-height: 27px;
    }

    .orderBox {
      padding: 0 0.75rem;
    }

    .order_item {
      font-size: 0.7rem;
      color: #535557;
      line-height: 1rem;
      margin-bottom: 0.6rem;
    }

    .order_item:last-child {
      margin-bottom: 0;
    }

    .btnBox {
      width: 100%;
      height: 2.5rem;
      align-items: center;
      padding-right: 0.75rem;
      background: #fff;
      position: fixed;
      bottom: 0;
      left: 0;
    }

    .btn1 {
      width: 75px;
      height: 27px;
      line-height: 25px;
      text-align: center;
      font-size: 12px;
      border-radius: 5px;
      border: 1px solid rgba(255, 255, 255, 0.74);
      color: #fff;
      margin-right: 1.5rem;
    }

    .align-center {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav" id="header">
      <a class="aui-pull-left" href="JavaScript:;" onclick="history.go(-1);"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
      <div class="aui-title">订单详情</div>
      <a class="aui-pull-right">
        <span class="aui-iconfont"></span>
      </a>
    </header>
    <div class="statusBox flex-wrap ">
      <img src="__IMG__/status2.png" alt="" class="statusImg">
      <div class="flex-con">
        <div class="status">{$data.send_status == 1 ? '未发货' : '已发货'}</div>
        <div class="countdown">{$data.send_status == 1 ? '请耐心等待，将尽快为您安排发货' : '订单已发货，请注意查收'}</div>
      </div>
    </div>
  <div class="container">
    {if $data.phone}
    <div class="outer">
      <div class="titleBox">
        <div class="linee"></div>
        <div class="title">收货人信息</div>
      </div>
      <div class="userBox">
        <div class="username">{$data.send_name}</div>
        <div class="telephone">{$data.phone}</div>
        <div class="flex-con"></div>
      </div>
      <div class="addressBox">
        <img src="__IMG__/address_location.png" alt="" class="addressImg">
        <div class="address aui-ellipsis-1">{$data.send_address}</div>
      </div>
    </div>
    {/if}
    <div class="outer">
      <div class="titleBox">
        <div class="linee"></div>
        <div class="title">采集基础信息</div>
      </div>
      <div class="orderBox">
        <div class="order_item aui-ellipsis-1">学校：{$data.school}</div>
        <div class="order_item aui-ellipsis-1">入学年份：{$data.year}年</div>
        <div class="order_item aui-ellipsis-1">年级：{$data.grade}</div>
        <div class="order_item aui-ellipsis-1">姓名：{$data.name}</div>
        <div class="order_item aui-ellipsis-1">性别：{$data.sex}</div>
        {if $data.height}
        <div class="order_item aui-ellipsis-1">身高：{$data.height}cm</div>
        {/if}
        {if $data.weight}
        <div class="order_item aui-ellipsis-1">体重：{$data.weight}Kg</div>
        {/if}
        <div class="order_item aui-ellipsis-1">衣服尺寸：{$data.size}</div>
        <div class="order_item aui-ellipsis-1">联系电话：{$data.phone}</div>
      </div>
    </div>
    <div class="outer">
      <div class="titleBox">
        <div class="linee"></div>
        <div class="title">订单信息</div>
      </div>
      <div class="orderBox">
        <div class="order_item aui-ellipsis-1">订单编号：{$data.orderno}</div>
        <div class="order_item aui-ellipsis-1">创建时间：{$data.add_time}</div>
        <!--<div class="order_item aui-ellipsis-1">备注：{$data.send_address}</div>-->
      </div>
    </div>
  </div>
</body>
<script type="text/javascript">

</script>

</html>